<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goodsManage' }" >商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类管理</el-breadcrumb-item>
        <div v-if="this.$store.state.login.user.type == 1" style="text-align: right" >
          <span style="color: red">请选择KTV</span>
          <el-select v-model="$store.state.login.shopID" clearable  @change="SelectShop()" placeholder="请选择KTV查询">
            <el-option
              v-for="item in $store.state.login.shopData"
              :key="item.shop_id"
              :label="item.name"
              :value="item.shop_id">
            </el-option>
          </el-select>
        </div>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <el-row style="min-height: 40px;display: flex;">
          <el-col style="margin-bottom: 5px;" align="left">
            <el-input v-model="type_name" clearable style="width: 300px;" placeholder="添加更多分类" class="kz_search">
              <el-button slot="append" type="primary" @click="submitAdd()">添加</el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-row style="text-align: left;float: left;" v-for="(item,index) in spData" :key="index">
          <div class="tagCss"  style="">
            <span style="margin-left: 20px;">
              {{item.type_name}}
            </span>
            <i @click="changeMes(item.id,0)" class="iconfont iconshanchu iconCss"></i>
          </div>
        </el-row>
        <div style="clear: both;"></div>
        <!--<div style="text-align: left;margin-top: 50px;">-->
          <!--<el-button @click="" type="primary">保存</el-button>-->
          <!--<el-button @click="getstart" style="margin-left: 20px;">取消</el-button>-->
        <!--</div>-->
      </el-row>
    </el-row>
  </div>


</template>

<script>
  export default {
    name: "Classified",
    data() {
      return {
        type_name: '',
        spData: [
          {
            name:'精致果盘',
            type:'',
          },
          {
            name:'酒水',
            type:'',
          },
          {
            name:'小吃',
            type:'',
          },
        ],
        shop_id:'',
      }
    },
    mounted(){
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      if (this.$store.state.login.user.type == 1) {
        this.shop_id = this.$store.state.login.shopID
      }else {
        this.shop_id = this.$store.state.login.user.id
      }
      this.getstart()
    },
    methods: {
      SelectShop(){
        this.shop_id = this.$store.state.login.shopID
        this.getstart()
      },
      getstart() {
        let thi = this
        const prams = {
          shop_id:thi.shop_id,
        }
        thi.mySelectAll('typeList',prams).then(function (value) {
          thi.spData = value.data
        })
      },
      submitAdd() {
        let thi = this
        if (thi.type_name == '') {
          thi.$message({
            message: '请上传完整信息！',
            type: 'error',
          });
          return
        }
        const por = {
          shop_id:thi.shop_id,
          type_name: thi.type_name,
        }
        thi.mySubmit('addType', por).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },
      //删除商品分类提示
      changeMes(id, state) {
        var heeh = '该'
        var caozuo = '禁用'
        if (id.length > 1) {
          heeh = '这些'
        }
        if (state == 0) {
          caozuo = '删除'
        }
        let thi = this
        thi.$confirm('此操作将'+caozuo + heeh+'商品分类', '是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          thi.deleteClassfied(id,state)
        }).catch(() => {
          thi.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //删除商品分类
      deleteClassfied(id,state) {
        let thi = this
        const por = {
          id: id,
          state: state,
        }
        thi.mySubmit('editTypeState', por).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },
    },
  }
</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 20px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
  .tagCss{
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    line-height: 40px;
    padding: 0px 20px 0px 20px;
    margin: 20px 20px 20px 0;
    text-align: center;
  }
  .iconCss{
    font-size: 20px;
    color: red;
    margin-bottom: 20px;
    position: relative;
    bottom: 20px;
    left: 25px;
  }
</style>
